<template>
  <div>
    <div class="add">
      <LikeDog
        v-for="(item, index) in list"
        :key="index"
        :info="item.dogName"
        :url="item.dogImgUrl"
        @like='choose'
      />
    </div>
    <ul>
      <li><h1>请选择您喜欢的狗狗</h1></li>
      <li v-for='(item,index) in listDog' :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
import LikeDog from './components/LikeDog.vue'
export default {
  components: {
    LikeDog,
  },
  data() {
    return {
      list: [
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zswxy.cn%2Fuploads%2Fimages%2F20181016%2F1539670141568075.jpg&refer=http%3A%2F%2Fimg.zswxy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669464265&t=0977bed9c454454163e9d64bb2c7ff40',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.zhuanboke.cn%2Fwp-content%2Fuploads%2F2021%2F09%2F20210925_614e86b93ec1e.jpg&refer=http%3A%2F%2Fwww.zhuanboke.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669464441&t=349abdcd4055407de242c0eea4418570',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-8045bacd751025b891aa3b6a54792108_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669464479&t=34c22a19034e2097a645f43cc8712a6e',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13684453887%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669464520&t=9ee5ee7e2bbbc390cc3c2cb390aa5519',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=3796728843,2852609090&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=427',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170524%2F1a39e751c09a4a63b111a884ca325407_th.jpg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669464597&t=966fb0720d8b0474a0d4aeafe26e998a',
          dogName: '萨摩耶',
        },
      ],
      listDog: []
    }
  },
  methods: {
    choose(Dog) {
      this.listDog.push(Dog)
      
    }
  }
}
</script>

<style>
div,
.add {
  display: flex;
  flex-wrap: wrap;
  width: 610px;
}
div {
  width: 100%;
}
li {
  list-style: none;
}
</style>
